<html>
<head>	
	<LINK href="./css/common.css" rel="stylesheet" type="text/css">
	<LINK href="./css/grid-editor.css" rel="stylesheet" type="text/css">
	
	<!-- INCLUDE MOSHU'S LIBRARY-->
    <!-- HELPERS-->
    <script type="text/javascript" src="Lib/objects-extensions.js"></script>
    <script type="text/javascript" src="Lib/animation.js"></script>
    <!--Actual lib-->
    <script type="text/javascript" src="Lib/common.js"></script>
    <script type="text/javascript" src="Lib/scene3d-libs.js"></script>
	<script type="text/javascript" src="Lib/scene3d.js"></script>
	<!-- END MOSHU'S -->
	
	
	<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js"></script>
	<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/jquery-ui.min.js"></script>
	<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        var IE = false;
    </script>
    <!--[IF IE]>
    <script type="text/javascript">
        IE = true;
    </script>
<![endif]-->
</head>
<body>
	
	<div class="page">
		<div class="page-header ">
			<div class="title">
				<span>Moshu's Canvas Library - Tests</span>		
			</div>		
			<div class="menu"></div>			
		</div>
	
	<div class="page-content" style="">
		<div class="controls-container resizable">
			<div class="properties">
                <div class="property">
                    No controls available
                </div>
                
			</div>
		</div>
		<div class="canvas-container resizable">
			<canvas width="800" height="500" id="c" style="border:2px solid black;background-color:azure;"></canvas>
		</div>
		<div class="io-container section-title resizable">
			<div style="height:10%;">Code samples</div>
			<div id="output" style="width:100%; height:90%;overflow-y:scroll;background:white;color:black;">
				<h2>Moshu's tests</h2>
				A bunch of shapes doing their stuff.
                <br /><br /><br /><br />		
			</div>
		</div>
	</div>
	<div class="page-footer">
	</div></div>
	<script type="text/javascript">
		$( ".menu" ).load( "partials/menu.html" );
		$( ".page-footer" ).load( "partials/footer.html" );
		//$(".resizable").resizable();
	</script>
	
	<script type="text/javascript">
	    var scene = new Scene3D("c");
	    var cube = new Cube(scene);
	    cube.setTexture("./images/5231.jpg");
        cube.addForce("gravity",0,-25,0)
	    scene.add(cube);

	    var cube1 = new Cube(scene);
	    cube1.location.x = 200
	    cube1.location.y = 81;
	    cube1.location.z = -123;
	    cube1.setTexture("./images/texture.png");
	    scene.add(cube1);

	    var cube2 = new Cube(scene);
	    cube2.location.x = 200
	    cube2.location.y = 81;
	    cube2.location.z = -123;
	    cube2.setTexture("./images/floor.png");
	    
	    scene.add(cube2);

	    scene.invalidate();

	    setTimeout(function () {
	        cube1.setSize(200);
	        cube2.velocity.dz = 10;
	        //cube2.setSize(200);
	    },3000);
	   
	    var size = 100;
	    animation.bind(this, function () {
	        //cube.rotation.x += 0.3;
	        //cube.rotation.y += 0.3;
	        //cube1.location.x+=0.5;
	        //cube1.setSize(cube1.size*2 + 0.01);
	        //scene.invalidate();
	        //size += 1;
	        //cube.setSize(size);
	    });
	    
	</script>
</body>
</html>